<template>
  <a-radio-group v-model:value="type">
    <a-radio-button value="all">全部</a-radio-button>
    <a-radio-button value="date">时间范围</a-radio-button>
  </a-radio-group>
  &emsp;
  <a-range-picker v-show="type==='date'" v-model:value="date" :disabledDate="disableDate"/>
  <VueECharts :option="options" style="height: 600px;width: 100%" autoresize :update-options="{notMerge:true}"/>
</template>

<script setup lang="ts">
import VueECharts from 'vue-echarts';
import {computed, defineProps, reactive, ref, watch} from 'vue';
import type {Dayjs} from 'dayjs';
import dayjs from "dayjs";
import {getLoginLog} from "@/apis/log";
import type {VideoLog as Log} from '@/types/Log';

type RangeValue = [Dayjs, Dayjs];

const {data} = defineProps<{
  data: Log[]
}>();

const xAxisData = [];
for (let i = 1; i < 25; i++) {
  xAxisData.push(i);
}

// 统计每小时登录人数
const loginCount = computed(() => {
  const count = new Array(24).fill(0);
  const value = type.value === 'all' ? data : pickDay.value;
  value.forEach(v => {
    count[v.timeObj.getHours() - 1]++;
  });
  return count;
});

// 选中类型
const type = ref<'all' | 'date'>('all');
// 禁用今天以后的日期
const disableDate = (date: Dayjs): boolean => {
  return date.isAfter(Date.now());
}
// 日期范围
const date = ref<RangeValue>([dayjs(), dayjs()]);

// 类型切换
const pickDay = ref([]);
watch([date, type], async () => {
  if (type.value !== 'all') {
    const {data} = await getLoginLog(...date.value);
    data.data.forEach((v: Log) => v.timeObj = new Date(v.time));
    pickDay.value = data.data;
  }
  options.series[0].data = loginCount.value;
});

const options = reactive({
  tooltip: {},
  xAxis: {
    data: xAxisData
  },
  yAxis: {},
  series: [
    {name: '登录人数', type: 'line', data: loginCount.value}
  ]
})

</script>

<style scoped>

</style>